<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>详细信息</title>
    <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
    <link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<div>
    <div style="color:red;position:absolute;top:20px;left:320px">
        <h3>近12h各监测点大气中SO2含量变化(数据每1h更新)</h3>
    </div>
    <div id="main1" style="width:1050px;height:400px;position:absolute;top:150px;left:10px"></div>
    <div id="main2" style="width:1050px;height:400px;position:absolute;top:550px;left:10px"></div>
</div>
</body>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
    var date = [];
    var myDate = new Date();
    var y = myDate.getFullYear();
    var m = (myDate.getMonth()+1);
    var d =  myDate.getDate();
    var h =  myDate.getHours()+1;
    for(let i=0;i<12;i++){
        var time = "";
        h = h-1;
        if(h<0){
            h = 23;
            d = d -1;
            if(d<0){
                d = 31;
                m = m -1;
            }
        }
        time = y+"/"+m+"/"+d+"\n"+h+":00";
        date[i]=time;
    }
    date.reverse();

    $.get('http://localhost:80/search', function (res) {
       var data = new Array();         //先声明一维
       var index = 0;
       for(var i=0;i<12;i++){          //一维长度为12
           data[i]=new Array(6);        //在声明二维
       }
       for(var i = 0;i<12;i++){
            data[i][0]  = res[index].so2;
            data[i][1]  = res[index+1].so2;
            data[i][2]  = res[index+2].so2;
            data[i][3]  = res[index+3].so2;
            data[i][4]  = res[index+4].so2;
            data[i][5]  = res[index+5].so2;
            index+=6;
       }
       //=======================================================================
       var all_data = new Array();
       all_data[0] = ['product', "彩香幼儿园","上方山","北库轧钢厂","采莲商业广场","红庄","木渎中学"]
       for(var i =1;i<13;i++){
            all_data[i] = new Array(7);
            all_data[i][0] = date[i-1];
            for(var j =0;j<6;j++){
                all_data[i][j+1]=data[i-1][j];
            }
       }

       var new_data = new Array();
       for(var i=0;i<6;i++){
            new_data[i] = new Array(12);
            for(var j = 0;j<12;j++){
                new_data[i][j] = data[j][i];
            }
       }
       console.log(new_data);
       //=======================================================================
       var myChart1 = echarts.init(document.getElementById('main1'));
       option1 = {
            legend: {},
            tooltip: {},
            dataset: {
                source: all_data
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    saveAsImage : {
                        show: true,
                        pixelRatio: 1,
                        title : '保存为图片',
                        type : 'png',
                        lang : ['点击保存']
                    }
                }
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [
                {type: 'bar'},
                {type: 'bar'},
                {type: 'bar'},
                {type: 'bar'},
                {type: 'bar'},
                {type: 'bar'}
            ]
       };
       myChart1.setOption(option1);
       //=======================================================================
       var myChart2 = echarts.init(document.getElementById('main2'));
       option2 = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ["彩香幼儿园","上方山","北库轧钢厂","采莲商业广场","红庄","木渎中学"]
            },
            toolbox: {
                feature: {
                saveAsImage: {}
            }
            },
            xAxis: {
                type: 'category',

                data: date
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:"彩香幼儿园",
                    type: 'line',
                    stack: '总量',
                    data: new_data[0]
                },
                {
                    name: "上方山",
                    type: 'line',
                    stack: '总量',
                    data: new_data[1]
                },
                {
                    name: "北库轧钢厂",
                    type: 'line',
                    stack: '总量',
                    data: new_data[2]
                },
                {
                    name: "采莲商业广场",
                    type: 'line',
                    stack: '总量',
                    data: new_data[3]
                },
                {
                    name: "红庄",
                    type: 'line',
                    stack: '总量',
                    data: new_data[4]
                },
                {
                    name: "木渎中学",
                    type: 'line',
                    stack: '总量',
                    data: new_data[5]
                }
            ]
        };
    myChart2.setOption(option2);
});
</script>
</html>